<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="insertOneData()">存一条数据</button>
  <button onclick="insertManyData()">批量存数据</button>
  <button onclick="queryDataByKey()">查询数据</button>
  <button onclick="queryAllData()">查询所有数据</button>
  <button onclick="updateData()">更新数据</button>
  <button onclick="deleteData()">删除数据</button>

  <script>
    const dbName = 'myDB'
    const dbVersion = 2.1
    let db;

    // 链接数据库
    function connectDB() {
      const request = window.indexedDB.open(dbName, dbVersion) // 打开数据库

      request.onerror = function (event) {
        console.log('数据库打开失败')
      }

      request.onupgradeneeded = function (event) {
        console.log('数据库版本发生变化')
        db = event.target.result
        if (!db.objectStoreNames.contains('user')) {  // 判断是否存在user对象仓库(表)
          db.createObjectStore('user', {
            keyPath: 'id',
            autoIncrement: true
          })
        }
      }

      request.onsuccess = function (event) {
        console.log('数据库打开成功')
        db = event.target.result
      }
    }
    connectDB()

    function insertOneData() {
      // 创建一个读写事务
      const transaction = db.transaction(['user'], 'readwrite')
      // 操作对象仓库
      const objectStore = transaction.objectStore('user')
      // 写入数据
      const res = objectStore.add({
        id: 1,
        name: '张三',
        age: 18,
        gender: '男',
        createAt: new Date().getTime()
      })
      res.onsuccess = function (event) {
        console.log('数据写入成功')
      }
      res.onerror = function (event) {
        console.log('数据写入失败')
      }
    }
    function insertManyData() {
      const transaction = db.transaction(['user'], 'readwrite')
      const objectStore = transaction.objectStore('user')
      for (let i = 2; i < 4; i++) {
        objectStore.add({
          id: i,
          name: '张三' + i,
          age: 20 + i,
          gender: '男',
          createAt: new Date().getTime()
        })
      }
    }

    function queryDataByKey() {
      const transaction = db.transaction(['user'], 'readwrite')
      const objectStore = transaction.objectStore('user')
      const res = objectStore.get(2)// 查询指定id的数据
      res.onsuccess = function (event) {
        console.log('查询成功', event.target.result)
      }
      res.onerror = function (event) {
        console.log('查询失败', event.target.result)
      }
    }
    function queryAllData() {
      const transaction = db.transaction(['user'], 'readwrite')
      const objectStore = transaction.objectStore('user')
      // const res = objectStore.getAll()// 获取所有数据 第一种方法
      // res.onsuccess = function (event) {
      //   const cursor = event.target.result
      //   if (cursor) {
      //     console.log('查询成功', cursor)
      //   } else {
      //     console.log('查询完成')
      //   }
      // }
      // res.onerror = function (event) {
      //   console.log('查询失败', event.target.result)
      // }

      const cursor = objectStore.openCursor()// 遍历所有数据 第二种方法
      cursor.onsuccess = function (event) {
        const cursor = event.target.result
        if (cursor) {
          console.log('查询成功', cursor)
          cursor.continue()// 相当于递归自己
        } else {
          console.log('查询完成')
        }
      }
    }

    function updateData() {
      const transaction = db.transaction(['user'], 'readwrite')
      const objectStore = transaction.objectStore('user')
      const res = objectStore.put({
        id: 1,
        name: '李四',
        age: 18,
        gender: '男',
        createAt: new Date().getTime()
      })
      res.onsuccess = function (event) {
        console.log('更新成功')
      }
      res.onerror = function (event) {
        console.log('更新失败')
      }
    }

    function deleteData() {
      const transaction = db.transaction(['user'], 'readwrite')
      const objectStore = transaction.objectStore('user')
      const res = objectStore.delete(2)
      res.onsuccess = function (event) {
        console.log('删除成功')
      }
      res.onerror = function (event) {
        console.log('删除失败')
      }
    }
  </script>
</body>
</html>